<template>
  <div v-if="showDriver===true && data.length===0">
    <!--分割线-->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 5px' }">{{ driverTitle }}</van-divider>
  </div>
  <div v-else>
    <!--商品列表-->
    <van-grid :gutter="gutterNum" clickable :column-num="columnNum">
      <van-grid-item v-for="item in data" :key="item.id" @click="toDetail(item)">
        <van-image :src="item.itemPic.split('###')[0]"/>
        <van-cell>
          <div class="goods-title">{{ item.itemName }}</div>
          <div class="goods-title">规格：{{ item.itemGg }}</div>
          <div class="goods-price">{{ formatPrice(item.salePrice) }}</div>
        </van-cell>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'goodsList',
  props: {
    data: Array, // 商品列表
    gutterNum: Number, // 商品和商品之间的间距 px
    columnNum: Number, // 商品列数
    showDriver: Boolean, // 商品列表为空的情况下，是否显示分割线
    driverTitle: String // 分割线标题
  },
  methods: {
    /**
     * 价格格式化
     */
    formatPrice (price) {
      return '¥' + price.toFixed(2)
    },
    /**
     * 跳转详情页面
     */
    toDetail (item) {
      this.$router.push({ name: 'detail', query: { itemId: item.id } })
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  &-title {
    font-size: 13px;
  }
  &-price {
    color: #f44;
    font-size: 13px;
  }
}
</style>
